<template>
  <s-layout
    title="蛋糕"
    navbar="custom"
    :showLeftButton="true"
    navbarMode="normal"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
    onShareAppMessage
    :showFloatButton="true"
  >
    <view>
      <!-- header start -->
      <view>
        <swiper mode="rect" style="height: 600rpx" border-radius="0">
          <swiper-item
            v-for="(it, idx) in bannerList"
            style="height: 600rpx"
            :key="idx"
            @tap="clickBanner(it)"
          >
            <image style="width: 100vw; height: 600rpx" :src="it" class="img" />
          </swiper-item>
        </swiper>
      </view>
      <!-- body end -->
      <view
        class="flex"
        style="
          background-color: #fff;
          justify-content: space-around;
          padding: 20rpx 0;
        "
      >
        <view>
          <uni-data-select
            ref="pre"
            :clear="false"
            placeholder="请选择省份"
            style="width: 300rpx"
            v-model="preId"
            :localdata="addressList"
            @change="changePre"
          ></uni-data-select>
        </view>
        <view>
          <uni-data-select
            ref="city"
            v-model="cityId"
            placeholder="请选择城市"
            style="width: 300rpx"
            :clear="false"
            :localdata="cityList"
            @change="changeCity"
          ></uni-data-select>
        </view>
        <view>
          <uni-data-select
            ref="county"
            v-model="countryId"
            placeholder="请选择县区"
            style="width: 300rpx"
            :clear="false"
            :localdata="countryList"
            @change="changeCounty"
          ></uni-data-select>
        </view>
      </view>

      <view class="store-box">
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltolower="lower"
        >
          <view
            v-for="(item, idx) in storeList"
            :key="idx"
            class="flex store-item"
            @click="goToDetail(item)"
          >
            <view style="margin-right: 20rpx">
              <image
                style="width: 150rpx; height: 150rpx; border-radius: 50%"
                :src="item.logo"
              ></image>
            </view>
            <view>
              <view class="shopName">{{ item.shopName }}</view>
              <view class="address">{{ item.address }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </s-layout>
</template>

<script>
import sheep from "@/sheep";
export default {
  data() {
    return {
      // bannerlist
      bannerList: [
        "https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/be84d1f1274b464c94da327310474d47.jpg",
        "https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/93d1d6c99bde4529b7e64d04a52ff6ac.jpg",
      ],
      addressList: [],
      preId: 0,
      cityList: [],
      cityId: 0,
      countryList: [],
      countryId: 0,
      queryParams: "",
      storeList: "",
      page: {
        pageNum: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      longitude: "",
      latitude:""
    };
  },
  computed: {
    template() {
      return sheep.$store("app").template.user;
    },
  },
  mounted() {
    this.initData();
  },
  onLoad() {
    
  },
  methods: {
    async initData() {
      await this.getLocation();
      this.getAddressList();
      this.getStoreList();
    },
    getLocation() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "wgs84",
          success: (res) => {
            this.longitude = res.longitude;
            this.latitude = res.latitude;
            console.log("当前位置的经度：" + res.longitude);
            console.log("当前位置的纬度：" + res.latitude);
            resolve(res);
          },
          fail: (err) => {
            console.error("获取位置失败：", err);
            resolve(null); // 即使失败也resolve，避免阻塞后续流程
          }
        });
      });
    },
    goToDetail(item) {
      sheep.$router.go(
        `/pages/cake/storeDetail?params=${encodeURIComponent(
          JSON.stringify(item)
        )}`
      );
    },
    lower(e) {
      if (this.page.pageTotal < this.page.pageNum) {
        return;
      }
      this.page.pageNum++;
      this.getStoreList();
      console.log("e", e);
    },
    changePre(id) {
      this.page.pageNum = 1;
      if (id) {
        const index = this.addressList.findIndex((item) => item.id === id);
        this.cityList = this.addressList[index].children;
        this.countryList = [];
        this.cityId = 0;
        this.countryId = 0;
      }

      this.preId = id;
      this.getStoreList();
    },
    changeCity(id) {
      this.page.pageNum = 1;
      if (id) {
        const index = this.cityList.findIndex((item) => item.id === id);
        this.countryList = this.cityList[index].children;
        this.countryId = 0;
      } else {
        this.countryId = [];
      }
      this.cityId = id;
      this.getStoreList();
    },
    changeCounty(id) {
      this.page.pageNum = 1;
      this.countryId = id;
      this.getStoreList();
    },
    async getStoreList() {
      let queryParams = "";
      if (this.preId) {
        queryParams += this.addressList.find(
          (item) => item.id === this.preId
        ).text;
      }
      if (this.cityId) {
        if (
          this.cityList.find((item) => item.id === this.cityId).text ===
          "直辖市"
        ) {
          queryParams += "";
        } else {
          queryParams += this.cityList.find(
            (item) => item.id === this.cityId
          ).text;
        }
      }

      if (this.countryId) {
        queryParams += this.countryList.find(
          (item) => item.id === this.countryId
        ).text;
      }
      const params = {
        address: queryParams,
        page: this.page.pageNum,
        size: this.page.pageSize,
        latitude:this.latitude,
        longitude:this.longitude
      };
      const res = await sheep.$api.cake.getStoreList(params);
      if (res.code === 200) {
        if (this.page.pageNum > 1) {
          this.storeList = this.storeList.concat(res.data.content);
        } else {
          this.storeList = res.data.content;
        }
        this.page.pageTotal = res.data.totalPages;
      }
    },
    async getAddressList() {
      const res = await sheep.$api.cake.getAddressList();
      if (res.code == 200) {
        // res.data
        this.addressList = res.data.map((item) => {
          item.value = item.id;
          item.text = item.title;
          item.children = item.children.map((cityItem) => {
            cityItem.value = cityItem.id;
            cityItem.text = cityItem.title;
            cityItem.children.map((regionItem) => {
              regionItem.value = regionItem.id;
              regionItem.text = regionItem.title;
              return regionItem;
            });
            return cityItem;
          });
          return item;
        });
      }
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .select--uni-select {
  width: 240rpx;
}

page {
  background-color: #efeef3;
}
.scroll-Y {
  height: calc(100vh - 820rpx);
  overflow: hidden;
}
.store-box {
  margin-top: 20rpx;

  .shopName {
    font-size: 35rpx;
    margin-bottom: 20rpx;
  }

  .store-item {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 20rpx;
  }
}

.body {
  position: relative;
  z-index: 99999;
  margin: -40rpx 30rpx 0 30rpx;
  padding: 0 15rpx;
  background-color: white;
  border-radius: 14rpx;
  padding-bottom: 20rpx;

  &__text {
    font-weight: bold;
    font-size: 30rpx;
    margin-top: 15rpx;
  }
}

.integral {
  display: flex;
  align-items: flex-end;
  padding: 20rpx;

  &__nav {
    // color: $u-main-color;
    font-weight: bold;
    margin-bottom: 20rpx;
    font-size: 30rpx;

    text {
      font-size: 38rpx;
    }
  }

  &__desc {
    font-size: 24rpx;
    // color: $u-type-info;
    margin-bottom: 10rpx;
  }
}

.grid-text {
  font-size: 38rpx;
  font-weight: bold;
}

.grid-desc {
  font-size: 24rpx;
  // color: $u-type-info;
  margin-bottom: 30rpx;
}
</style>
